<template>
  <el-dialog
    v-el-drag-dialog
    class="cylinderFlowControl-ErrorDetailDialog"
    title="气瓶流转"
    :visible.sync="isShow"
    width="600px"
    @closed="close"
  >
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in trackInfoData"
        :key="index"
        :timestamp="dateFormat(item.happendTime)"
        placement="top"
      >
        <div
          :class="{
            bodyInfo_card: true,
            first: index === 0,
          }"
        >
          <p class="card_title">{{ item.chipTraceTypeName }}</p>
          <template v-if="item.chipTraceType === 1 || item.chipTraceType === 9">
            <p><span>装车机构：</span>{{ item.orgName }}</p>
            <p><span>装车车辆：</span>{{ item.truckCode }}</p>
            <p><span>装车人：</span>{{ item.ownerName }}</p>
          </template>
          <template v-else-if="item.chipTraceType === 2 || item.chipTraceType === 10">
            <p><span>卸车机构：</span>{{ item.orgName }}</p>
            <p><span>卸车车辆：</span>{{ item.truckCode }}</p>
            <p><span>卸车人：</span>{{ item.ownerName }}</p>
          </template>

          <template v-else-if="item.chipTraceType === 3 || item.chipTraceType === 4">
            <p>
              <span>{{ item.chipTraceType === 3 ? "领瓶机构" : "还瓶机构" }}：</span>{{ item.orgName }}
            </p>
            <p v-if="item.ownerName"><span>还瓶人：</span>{{ item.ownerName }}</p>
            <p v-if="item.truckCode"><span>配送车辆：</span>{{ item.truckCode }}</p>
          </template>
          <template v-else-if="item.chipTraceType === 11">
            <p><span>充装场站：</span>{{ item.orgName }}</p>
            <p><span>充装工位：</span>{{ item.ownerName }}</p>
          </template>
          <template v-else-if="item.chipTraceType === 22 || item.chipTraceType == 23">
            <p><span>充装场站：</span>{{ item.orgName }}</p>
            <p><span>检查人：</span>{{ item.ownerName }}</p>
          </template>
          <template v-else>
            <p>
              <span>客户名称：</span>{{ item.csmName }}
              <span v-if="item.csmPhone">({{ item.csmPhone }})</span>
            </p>
            <p><span>地址：</span>{{ item.csmAddress }}</p>
            <p>
              <span>配送员：</span>{{ item.sender
              }}<span v-if="item.orgName">({{ item.orgName }})</span>
            </p>
            <p v-if="item.sender && item.truckCode">
              <span>配送车辆：</span>{{ item.truckCode }}
            </p>
          </template>
        </div>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script>
  import { queryTrackData } from '@/api'
  import dayjs from 'dayjs'
  export default {
    data() {
      return {
        isShow: false,
        trackInfoData: [],
        rowData: {},
        type: 1 // 1 气瓶编码 2 芯片编码
      }
    },

    methods: {
      close() {
        this.trackInfoData = []
        this.isShow = false
      },
      show(type, row) {
        this.type = type
        this.rowData = row
        this.isShow = true
        this.getData()
      },
      async getData() {
        const params = {
          happendTime: ''
        }
        if (this.type === 2) {
          params.gpbm = ''
          params.xpbm = this.rowData.xpbm
        } else {
          params.gpbm = this.rowData.gpbm
          params.xpbm = ''
        }
        const { status, data } = await queryTrackData(params)
        if (status === 200) {
          this.trackInfoData = data
        }
      },
      dateFormat(val) {
        return val ? dayjs(val).format('YYYY-MM-DD HH:mm') : ''
      }
    }
  }
</script>

<style lang="scss" scoped>
.cylinderFlowControl-ErrorDetailDialog {
  /deep/.el-timeline {
    margin-top: 20px;
    margin-left: 120px;

    .bodyInfo_card {
      .card_title {
        position: absolute;
        top: 0;
        left: -120px;
        max-width: 120px;
        font-size: 14px;
        font-weight: 700;
      }

      p {
        line-height: 20px;
      }
    }
    .first {
      color: crimson;
    }
  }
}
</style>
